<template>

  <!--商品列表开始  -->
  <view class="content">
    <view class="navbar" :style="{position:headerPosition,top:headerTop}">
      <view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
        综合排序
      </view>
      <view class="nav-item" :class="{current: filterIndex === 1}" >
        销量优先
      </view>
      <view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
        <text>价格</text>
        <view class="p-box">
          <text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
          <text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
        </view>
      </view>
      <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
    </view>
    <view class="goods-list">
      <view
          v-for="(item, index) in goodsList" :key="index"
          class="goods-item"
          @click="navToDetailPage(item)"
      >
        <view class="image-wrapper">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <view class="item-name">
          <text class="title clamp">{{item.proName}}</text>
        </view>
        <view class="price-box">
          <text class="price">{{item.proPrice}}</text>
          <text>已售 999</text>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadingType"></uni-load-more>

    <view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
      <view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
        <scroll-view scroll-y class="cate-list">
          <view v-for="item in category" :key="item.id">
            <view class="cate-item b-b two">{{item.name}}</view>
            <view
                v-for="tItem in item.children" :key="tItem.id"
                class="cate-item b-b"
                :class="{active: tItem.id==cateId}"
                @click="changeCate(tItem)">
              {{tItem.name}}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
  <!-- 商品列表结束   -->
</template>

<script>

import UploadImage from "../../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image";
import {listAll1} from "../../../api/product/product";
import {listAllCopy} from "../../../api/product/categories";


export default {
  components: {UploadImage},

  data() {
    return {
      cateMaskState: 0, //分类面板展开状态
      headerPosition:"fixed",
      headerTop:"0px",
      loadingType: 'more', //加载更多状态
      filterIndex: 0,
      cateId: 0, //已选三级分类id
      priceOrder: 0, //1 价格从低到高 2价格从高到低
      cateList: [],
      goodsList: [],
      product: {},
      category:null,
    };
  },
  onLoad(options){
    // #ifdef H5
    this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
    // #endif
    this.product.sortId = options.query
    this.product.proName = options.keyword
    this.loadData(this.product.sortId);
  },
  onPageScroll(e){
    //兼容iOS端下拉时顶部漂移
    if(e.scrollTop>=0){
      this.headerPosition = "fixed";
    }else{
      this.headerPosition = "absolute";
    }
  },

  //加载更多
  onReachBottom(){
    this.loadData();
  },
  watch: {
    priceOrder() {
      let g = this.goodsList
      this.goodsList = []
      if (this.priceOrder === 1) {
        g.sort((a,b)=>a.proPrice-b.proPrice)
        this.goodsList = g
      } else if (this.priceOrder === 2){
        g.sort((a,b)=>b.proPrice-a.proPrice)
        this.goodsList = g
      } else {
        this.loadData()
      }
    }
  },
  methods: {
    //加载分类
    async loadCateList(fid, sid){
      let list = await this.$api.json('cateList');
      let cateList = list.filter(item=>item.pid === fid);

      cateList.forEach(item=>{
        let tempList = list.filter(val=>val.pid === item.id);
        item.child = tempList;
      })
      this.cateList = cateList;
    },
    //加载商品 ，带下拉刷新和上滑加载
    async loadData(id) {
      console.info(this.product.proName)
      let gL = await listAll1({sortId:id,proName:this.product.proName})
      this.goodsList = gL.rows
      let list = await listAllCopy({})
      let tree = this.handleTree(list.data, 'id', 'parentId', 'children');
if (id!=null&&id!==''){
  let cate;
  list.data.forEach((o) => {
    if (o.id == this.product.sortId) {
      cate= o;
    }
  })
  let par = list.data.filter(o => o.id == cate.parentId)
  tree.forEach(o => {
        if (o.id === par[0].parentId) {
          this.category = o.children;
        }
      }
  )
}



    },
    //筛选点击
    tabClick(index){
      if(this.filterIndex === index && index !== 2){
        return;
      }
      this.filterIndex = index;
      if(index === 2){
        this.priceOrder = this.priceOrder === 1 ? 2: 1;
      }else{
        this.priceOrder = 0;
      }
      // uni.pageScrollTo({
      //   duration: 300,
      //   scrollTop: 0
      // })
      // this.loadData('refresh', 1);

    },
    //显示分类面板
    toggleCateMask(type){
      let timer = type === 'show' ? 10 : 300;
      let	state = type === 'show' ? 1 : 0;
      this.cateMaskState = 2;
      setTimeout(()=>{
        this.cateMaskState = state;
      }, timer)
    },
    //分类点击
    changeCate(item){
      this.loadData(item.id)
/*      this.cateId = item.id;*/
      this.toggleCateMask();
      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0
      })
    /*  this.loadData('refresh', 1);
      uni.showLoading({
        title: '正在加载'
      })*/
    },
    //详情
    navToDetailPage(item){
      //测试数据没有写id，用title代替
      let id = item.proId;
      uni.navigateTo({ url: '/pages/product/details/index?proId='+id});
    },
    stopPrevent(){},
    handleTree(data, id, parentId, children) {
      let config = {
        id: id || 'id',
        parentId: parentId || 'parentId',
        childrenList: children || 'children'
      };
      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];
      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }
      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }
      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }

      return tree;
    }
  },
}
</script>


<style lang="scss">
page, .content{
  background: $page-color-base;
}
.content{
  padding-top: 96upx;
}

.navbar{
  position: fixed;
  left: 0;
  top: var(--window-top);
  display: flex;
  width: 100%;
  height: 80upx;
  background: #fff;
  box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
  z-index: 10;
  .nav-item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 30upx;
    color: $font-color-dark;
    position: relative;
    &.current{
      color: $base-color;
      &:after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 120upx;
        height: 0;
        border-bottom: 4upx solid $base-color;
      }
    }
  }
  .p-box{
    display: flex;
    flex-direction: column;
    .yticon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30upx;
      height: 14upx;
      line-height: 1;
      margin-left: 4upx;
      font-size: 26upx;
      color: #888;
      &.active{
        color: $base-color;
      }
    }
    .xia{
      transform: scaleY(-1);
    }
  }
  .cate-item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 80upx;
    position: relative;
    font-size: 44upx;
    &:after{
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-left: 1px solid #ddd;
      width: 0;
      height: 36upx;
    }
  }
}

/* 分类 */
.cate-mask{
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0);
  z-index: 95;
  transition: .3s;

  .cate-content{
    width: 630upx;
    height: 100%;
    background: #fff;
    float:right;
    transform: translateX(100%);
    transition: .3s;
  }
  &.none{
    display: none;
  }
  &.show{
    background: rgba(0,0,0,.4);

    .cate-content{
      transform: translateX(0);
    }
  }
}
.cate-list{
  display: flex;
  flex-direction: column;
  height: 100%;
  .cate-item{
    display: flex;
    align-items: center;
    height: 90upx;
    padding-left: 30upx;
    font-size: 28upx;
    color: #555;
    position: relative;
  }
  .two{
    height: 64upx;
    color: #303133;
    font-size: 30upx;
    background: #f8f8f8;
  }
  .active{
    color: $base-color;
  }
}

/* 商品列表 */
.goods-list{
  display:flex;
  flex-wrap:wrap;
  padding: 0 30upx;
  background: #fff;
  .goods-item{
    display:flex;
    flex-direction: column;
    width: 48%;
    padding-bottom: 40upx;
    &:nth-child(2n+1){
      margin-right: 4%;
    }
  }
  .image-wrapper{
    width: 100%;
    height: 330upx;
    border-radius: 3px;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }
  .item-name{
    margin-top: 10upx;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 70upx;
  }
  .price-box{
    margin-top: 20upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10upx;
    font-size: 24upx;
    color: $font-color-light;
  }
  .price{
    font-size: $font-lg;
    color: $uni-color-primary;
    line-height: 1;
    &:before{
      content: '￥';
      font-size: 26upx;
    }
  }
}


</style>
